<template>
    <view class="content">
        <view  class="card">
            <image class="bgimg" src="http://sni1muz85.hd-bkt.clouddn.com/img/my/card_bg.png"></image>
            <view class="card1">
                <view class="left">
                    <view class="text">
                        <view class="y">￥</view>
                        <view class="money">{{form.money}}</view>
                    </view>
                    <view class="text2">现金</view>
                    <view class="a"></view>
                </view>
                <view class="right">
                    <view class="title">{{form.name}}</view>
                    <view class="line">
                        <view class="time">领取日期：{{form.receiveTime}}</view>
                        <view class="num">剩{{form.residue}}张</view>
                    </view>
                </view>
            </view>
        </view>

        <view class="box">
            <view class="text">
<!--                要求：累计打卡100天-->
              {{form.ruleName?form.ruleName:""}}
            </view>
<!--            <view class="text">使用方法：方法内容方法内容方法内容方法内容方法内容方法内容方法内容方法内容方法内容方法内容方法内容</view>-->
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
          form:{}
        }
    },
  onLoad(res){
    this.$api.request({
          url:this.$api.cardInfo+res.id,
        }
    ).then(res=>{
      console.log(res)
      this.form=res.data
    })
  },
  onShow(){

  },
    methods:{

    }
}
</script>

<style lang="less" scoped>
.content {
    display: flex;
    flex-direction: column;
    align-items: center;

    .card {
        position: relative;
        margin-top: 30rpx;

        .bgimg {
            width: 92vw;
            height: 250rpx;
        }

        .card1 {
            width: 100%;
            height: 200rpx;
            position: absolute;
            top: 30rpx;
            left: 0;
            border-radius: 15rpx;

            display: flex;
            align-items: center;

            // z-index: 10;
            .left {
                height: 250rpx;
                width: 240rpx;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                position: relative;

                .text {
                    color: #fff;
                    display: flex;
                    align-items: flex-end;

                    .y {
                        font-size: 28rpx;
                        margin-bottom: 10rpx;
                    }

                    .money {
                        font-size: 48rpx;
                        font-weight: bold;
                    }
                }
                .text2 {
                    font-size: 28rpx;
                    color: #fff;
                }

                .a {
                    height: 40rpx;
                    width: 40rpx;
                    background-color: #fff;
                    border-radius: 50%;
                    position: absolute;
                    right: -15rpx;
                }
            }

            .right {
                height: 250rpx;
                margin-left: 20rpx;
                display: flex;
                flex-direction: column;

                .title {
					max-width: 400rpx;
                    font-size: 38rpx;
                    font-weight: bold;
                    color: #333333;
                    margin-top: 20rpx;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                .line {
                    width: 400rpx;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-top: 70rpx;
                    font-size: 32rpx;

                    .time {
                        font-size: 24rpx;
                        color: #8A8A8A;
                    }

                    .num {
                        color: #8A8A8A;
                    }

                }
            }
        }
    }

    .box {

        width: 92%;

        .text {
            margin-top: 20rpx;
            font-size: 32rpx;
          white-space: pre-wrap;
        }
    }
}
</style>